<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>Input 输入框</title>
</head>
<body>
	<div id="app">
		<form>
			<h3>基础用法</h3>
			<el-input v-model="input01" placeholder="请输入内容"></el-input>

			<h3>禁用状态</h3>
			<el-input v-model="input02" placeholder="请输入内容" :disabled="true"></el-input>

			<h3>可清空</h3>
			<el-input v-model="input03" placeholder="请输入内容" clearable> </el-input>

			<h3>文本域</h3>
			<el-input v-model="input04" type="textarea" :rows="2" placeholder="请输入内容"> </el-input>

			<h3>复合型输入框</h3>
			<el-input v-model="input05" placeholder="请输入内容" >
				<template slot="prepend">Http://</template>
			</el-input>
			<el-input v-model="input06" placeholder="请输入内容" style="margin-top: 10px;">
				<template slot="append">.com</template>
			</el-input>
			<el-input placeholder="请输入内容" v-model="input07" class="input-with-select">
				<el-select v-model="select" slot="prepend" placeholder="请选择" style=" width:150px;">
					<el-option label="餐厅名" value="1"></el-option>
					<el-option label="订单号" value="2"></el-option>
					<el-option label="用户电话" value="3"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search"></el-button>
			</el-input>
		</form>
	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					input01 : '',
					input02 : '',
					input03 : '',
					input04 : '',
					input05 : '',
					input06 : '',
					input07 : '',
					select : ''
				};
			},
			methods : {}
		})
	</script>
</body>
</html>